<template>
  <el-dialog
    title="西江水厂点位数据录入"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="missionPart"
  >
    <div class="dataWrite">
      <el-table
        :data="tableCopyList"
        border
        style="width: 100%;"
        height="calc(80vh - 210px)"
      >
        <el-table-column
          prop="area"
          width="100"
          header-align="center"
          align="center"
          label="流量计名称"
        />
        <el-table-column
          prop="date"
          header-align="center"
          align="center"
          label="日期"
        >
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.date"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="time"
          header-align="center"
          align="center"
          label="时间"
        >
          <template slot-scope="scope">
            <el-time-select
              v-model="scope.row.time"
              :picker-options="{
                start: '00:00',
                step: '00:10',
                end: '23:50'
              }"
              format="HH:mm"
              placeholder="选择时间"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="positiveFlow"
          header-align="center"
          align="center"
          label="流量值"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.positiveFlow"
              placeholder="请输入流量值"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      visible: false, // 弹层的显示
      dataForm: {
        id: 0,
        date: "", // 时间
        areaId: null, // 片区id
        area: null, // 片区
        positiveFlow: "", // 正流量行度
        negativeFlow: 0, // 负流量行度
        instantFlow: "", // 瞬时流量
        remark: "" // 备注
      },
      areaOptions: [],
      tableCopyList: [
        {
          area: "厂内1号反应池1#（东）",
          areaId: 0,
          time: null,
          date: null,
          positiveFlow: null,
          negativeFlow: 0,
          instantFlow: null
        },
        {
          area: "厂内1号反应池2#（西）",
          areaId: 0,
          time: null,
          date: null,
          positiveFlow: null,
          negativeFlow: 0,
          instantFlow: null
        },
        {
          area: "厂内2号反应池1#（西）",
          areaId: 0,
          time: null,
          date: null,
          positiveFlow: null,
          negativeFlow: 0,
          instantFlow: null
        },
        {
          area: "厂内2号反应池2#（东）",
          areaId: 0,
          time: null,
          date: null,
          positiveFlow: null,
          negativeFlow: 0,
          instantFlow: null
        },
        {
          area: "自用水",
          areaId: 0,
          time: null,
          date: null,
          positiveFlow: null,
          negativeFlow: 0,
          instantFlow: null
        },
        {
          area: "反冲洗",
          areaId: 0,
          time: null,
          date: null,
          positiveFlow: null,
          negativeFlow: 0,
          instantFlow: null
        },
        {
          area: "回流调节池",
          areaId: 0,
          time: null,
          date: null,
          positiveFlow: null,
          negativeFlow: 0,
          instantFlow: null
        }
      ]
    };
  },
  mounted() {
    this.getAreaDataList();
  },
  methods: {
    init() {
      // dateTime - 传入的年月日时分秒
      // dataGroup - 传入的泵站信息
      this.visible = true; // 显示弹层
      this.$nextTick(() => {
        this.tableCopyList = [
          {
            area: "厂内1号反应池1#（东）",
            areaId: 0,
            time: null,
            date: null,
            positiveFlow: null,
            negativeFlow: 0,
            instantFlow: null
          },
          {
            area: "厂内1号反应池2#（西）",
            areaId: 0,
            time: null,
            date: null,
            positiveFlow: null,
            negativeFlow: 0,
            instantFlow: null
          },
          {
            area: "厂内2号反应池1#（西）",
            areaId: 0,
            time: null,
            date: null,
            positiveFlow: null,
            negativeFlow: 0,
            instantFlow: null
          },
          {
            area: "厂内2号反应池2#（东）",
            areaId: 0,
            time: null,
            date: null,
            positiveFlow: null,
            negativeFlow: 0,
            instantFlow: null
          },
          {
            area: "自用水",
            areaId: 0,
            time: null,
            date: null,
            positiveFlow: null,
            negativeFlow: 0,
            instantFlow: null
          },
          {
            area: "反冲洗",
            areaId: 0,
            time: null,
            date: null,
            positiveFlow: null,
            negativeFlow: 0,
            instantFlow: null
          },
          {
            area: "回流调节池",
            areaId: 0,
            time: null,
            date: null,
            positiveFlow: null,
            negativeFlow: 0,
            instantFlow: null
          }
        ];
      });
    },
    // 表单提交
    dataFormSubmit() {
      // let postList = [];
      // // 判断手抄数据是否有，有就可以提交
      // this.tableCopyList.forEach(item => {
      //   // 先判断是否有填写正流量行度
      //   if (item.positiveFlow != null || item.positiveFlow != "") {
      //     // 判断是否有选择时间
      //     if (item.time === null || item.time === "") {
      //       item.time = moment(new Date()).format("HH:mm");
      //     }
      //     let PostItem = {
      //       areaId: item.areaId,
      //       area: item.area,
      //       date: item.date + " " + item.time + ":00",
      //       positiveFlow: parseFloat(item.positiveFlow).toFixed(2),
      //       negativeFlow: item.negativeFlow ? parseFloat(item.negativeFlow) : 0,
      //       instantFlow: item.instantFlow ? parseFloat(item.instantFlow) : 0
      //     };
      //     postList.push(PostItem);
      //   }
      // });
      // this.$refs["dataForm"].validate(valid => {
      //   if (valid) {
      //     this.$http({
      //       url: this.$http.adornUrl("/cms/tbCopyFlowData/batchsave"),
      //       method: "post",
      //       data: postList
      //     }).then(({ data }) => {
      //       if (data && data.code === 0) {
      //         this.$message({
      //           message: "操作成功",
      //           type: "success",
      //           duration: 1500,
      //           onClose: () => {
      //             this.visible = false;
      //             this.$emit("refreshDataList");
      //           }
      //         });
      //       } else {
      //         this.$message.error(data.msg);
      //       }
      //     });
      //   }
      // });
    },
    // 获取数据
    selectValue(val) {
      let ChooseItem = this.areaOptions.filter(item => item.id === val);
      if (ChooseItem.length > 0) {
        this.dataForm.area = ChooseItem[0].flowMeterName;
      }
    },
    // 爬取流量计数据
    getAreaDataList() {
      this.$http({
        url: this.$http.adornUrl(`/cms/tbEquipment/combo`),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.areaOptions = data.list;
        } else {
          this.areaOptions = [];
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.dataWrite ::v-deep {
  position: relative;
  .el-form {
    position: relative;
    .el-form-item {
      margin: 0 0 10px;
    }
  }
  .secondForm {
    margin: 10px 0 0;
  }
}
</style>
